<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试文件上传多个文件</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/layui/layui.all.js"></script>


</head>
<body>

<button type="button" class="layui-btn" id="idUploadPic">
    <i class="layui-icon">&#xe67c;</i>选择图片
</button>
<br/><br/>
<button id="shangchuantupian" type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">上传图片</button>



<script src="../zujian/layui/layui.all.js"></script>
<script>
    layui.use('upload', function(){
        let upload = layui.upload;
        let load01=null;

        //执行实例
        let uploadInst = upload.render({
             elem: '#idUploadPic' //绑定元素
            ,url: 'http://127.0.0.1:81/phptest01/phpTestJieShouPic.php' //上传接口
            //,url: 'http://127.0.0.1:803/testlayuiuploadpic' //上传接口
            ,field:'file'
            ,headers:{token:'sasasas'}
            ,accept:'file'
            ,size:10240//最大大小，单位kb，不支持ie8/9

            // 是否允许多文件上传。设置 true即可开启。不支持ie8/9
            //事实证明, 上传多个文件的时候, 等于是调了多次接口,然后这个接口会被多次回调
            ,multiple:true

            // 设置同时可上传的文件数量，一般配合 multiple 参数出现。
            //注意：该参数为 layui 2.2.3 开始新增   0表示不限制
            ,number:4

            // 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9,  默认true
            ,drag:true




            // 规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：
            // acceptMime: 'image/*'（只显示图片文件）
            // acceptMime: 'image/jpg, image/png'（只显示 jpg 和 png 文件）
            // 注：该参数为 layui 2.2.6 开始新增
           ,acceptMime:'image/*'

            ,data:{
                //从 layui 2.2.6 开始，支持动态值，如:
                // id: function(){
                //     return $('#id').val();
                // }
                id:'10'
            }

            // 允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置
            // exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
            //,exts:''


            //是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
            ,auto:false

            //指向一个按钮触发上传
            ,bindAction: '#shangchuantupian'

            // 选择文件后的回调函数。返回一个object参数，详见下文
            // ,choose:function (obj) {
            //     //在执行 upload.render(options) 方法时，其实有返回一个实例对象，以便对完成重新上传等操作。
            //     // 注意：这是对当前上传队列的全局重新上传，而 choose 回调返回的
            //     // obj.upload(index, file) 方法则是对单个文件进行重新上传。如：
            //
            //
            //     obj.preview(function(index, file, result){
            //         //对上传失败的单个文件重新上传，一般在某个事件中使用
            //         // obj.upload(index, file);
            //     });
            //
            //
            // }


            //文件提交上传前的回调。返回一个object参数（同上），详见下文
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                //打开加载动画
                load01=layer.load(); //上传loading
            }
            ,done:function(res){
                //上传完毕回调//事实证明, 上传多个文件的时候, 等于是调了多次接口,然后这个函数会被多次回调
                // alert(JSON.stringify(res))
                //最后关闭加载动画
                layer.close(load01)

            }
            ,error:function(){
                //请求异常回调
                alert("异常");
            }


        });

        //重新上传的方法，一般在某个事件中使用
        //uploadInst.upload();


    });
</script>
<!--

php接口 如下  $表示变量



<?php
header('Access-Control-Allow-Origin:*');
//没有这个无法接收token,可以吧  authorization,content-type 去掉,也可以全部用*代替
//header('Access-Control-Allow-Headers:authorization,content-type,token');
header('Access-Control-Allow-Headers:*');
header('Access-Control-Allow-Credentials:true');
$header1=getallheaders();


try {
    $file=$_FILES['file'];
    move_uploaded_file($file['tmp_name'], 'E:/doit/set/nginx/nginx-1.17.6/html/'.$file['name']);
} catch (Exception $e) {
    echo $e->getMessage();
}


echo '{
  "code": 0
  ,"msg": "'.$header1['token'].'"
  ,"data": {
    "src": "http://127.0.0.1:80/'.$file['name'].'"
    ,"title": "图片名称"
  }
}';

-->
</body>
</html>